<%@page import="com.muapet.model.Pet"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Mua~亲亲宠————${pet.title}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<%@ include file="/WEB-INF/jsp/top.jspf"%>
	<div class="title"></div>
	<%
		Pet pet = (Pet) request.getAttribute("pet");
		User seller = (User) request.getAttribute("seller");
		String images = pet.getImages();

		if (images == null || images.length() == 0) {
			images = "images/pet_icon.jpg";
		}
		String[] imagesUrls = images.split(";");
	%>
	<div class="col-sm-offset-1 col-sm-10">
		<div class="row line-bottom">
			<div class="page-header" style="color:#000099">
				<h3>
					${pet.title}
					<%
						if (loginUser != null && seller.getId().equals(loginUser.getId())) {
					%><small><a href="pet/editPet.do?pet_id=${pet.id}"><button
								class="btn btn-sm  btn-info">编辑</button> </a>
						<button class="btn btn-sm  btn-info" onclick="deletePet()">删除</button>
					</small>
					<%
						}
					%>
				</h3>
				<input type="hidden" id="sellerId" value="${seller.id}"> <input
					type="hidden" id="petId" value="${pet.id}">
			</div>
			<div id="pet_images" class="col-sm-4">
				<div id="myCarousel" class="carousel slide" style="height: 240px">
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="<%=imagesUrls[0]%>" style="height: 240px; weight:100%">
						</div>
						<%
							for (int i = 1; i < imagesUrls.length; i++) {
						%>
						<div class="item">
							<img src="<%=imagesUrls[i]%>" style="height: 240px ; weight:100%">
						</div>
						<%
							}
						%>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#myCarousel" role="button"
						data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">上一张</span> </a> <a
						class="right carousel-control" href="#myCarousel" role="button"
						data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">下一张</span> </a>
				</div>
				<!-- 轮播（Carousel）指标 -->
				<div id="image_list" class="row">
					<div class='thumbnail col-sm-offset-1 col-sm-2'
						style='cursor:pointe; height: 40px' data-target="#myCarousel"
						data-slide-to="0" class="active">
						<img src="<%=imagesUrls[0]%>">
					</div>
					<%
						for (int i = 1; i < imagesUrls.length; i++) {
					%>
					<div class='thumbnail col-sm-2' style='cursor:pointe; height: 40px'
						data-target="#myCarousel" data-slide-to="<%=i%>">
						<img src="<%=imagesUrls[i]%>">
					</div>
					<%
						}
					%>
				</div>
			</div>
			<div id="pet_info" class="col-sm-5 line-left line-right">
				<table style="width: 100%;height: 240px">
					<tbody>
						<tr>
							<td>价格:</td>
							<td colspan="3" style="color :red;font-size: 30px"><strong>￥${pet.price}</strong>
							</td>
						</tr>
						<tr>
							<td style="width: 20%">品种：</td>
							<td style="width: 30%">${pet.variety}</td>
							<td style="width: 20%">性别：<%
								if (pet.getSex() != null && pet.getSex() == Pet.PET_SEX_MALE) {
							%>公<%
								} else if (pet.getSex() != null
										&& pet.getSex() == Pet.PET_SEX_FEMALE) {
							%>母<%
								} else {
							%>未知<%
								}
							%>
							</td>
							<td style="width: 30%"></td>
						</tr>
						<tr>
							<td style="width: 20%">名字：</td>
							<td style="width: 30%">${pet.name}</td>
							<td style="width: 20%">主毛色:</td>
							<td style="width: 30%">${pet.color}</td>
						</tr>
						<tr>
							<td>所在地：</td>
							<td colspan="3">${pet.province}—${pet.city}</td>
						</tr>
					</tbody>
				</table>
				<%
					if (pet.getBuyerId() == null || pet.getBuyerId() == 0) {
				%><a href="pet/buyPet.do?id=${pet.id}"><button
						class="btn btn-success col-sm-offset-8 col-sm-3">
						<span class="glyphicon glyphicon-shopping-cart"></span> 马上带走
					</button> </a>
				<%
					} else {
				%>
				<div class="label label-default col-sm-offset-8 col-sm-3"
					style="font-size: 20px">已出售</div>
				<%
					}
				%>
			</div>
			<div id="seller_info" class="col-sm-3">
				<div>
					<h3 class="col-sm-offset-1 col-sm-10">
						<span class="label label-success">卖家信息</span>
					</h3>
					<img src="${seller.icon}" class="img-responsive col-sm-offset-2"
						alt="Generic placeholder thumbnail"
						onerror="this.src='images/user_icon.jpg'" width="80" height="80">
					<table style="width: 100%;height: 140px;font-size:12px">
						<tbody>

							<tr>
								<td style="width: 40%">昵称：</td>
								<td style="width: 60%">${seller.name}</td>
							</tr>
							<tr>
								<td style="width: 40%">性别：</td>
								<td style="width: 60%"><%=(seller.getSex() == null || seller.getSex() == 0)
					? (seller.getSex() == 1 ? "男" : "女")
					: "未知"%></td>
							</tr>
							<tr>
								<td style="width: 40%">电话：</td>
								<td style="width: 60%">${seller.tel}</td>
							</tr>
							<tr>
								<td style="width: 40%">邮箱：</td>
								<td style="width: 60%">${seller.email}</td>
							</tr>
							<tr>
								<td style="width: 40%">实名状态：</td>
								<td style="width: 60%"><%=(seller.getIspass() == null || seller.getSex() == 0)
					? (seller.getSex() == 1 ? "通过" : (seller.getSex() == 2
							? "未通过"
							: "审核中")) : "未填写"%></td>
							</tr>
						</tbody>
					</table>
					<div class="row">
						<button class="btn btn-sm btn-success col-sm-offset-1 col-sm-4"
							onclick="watchUser()">卖家信息</button>
						<button class="btn btn-sm btn-success col-sm-offset-1 col-sm-4"
							onclick="hisPets()">TA的宠物</button>
					</div>
				</div>


			</div>
		</div>
		<div id="pet_description" class="col-sm-offset-2 col-sm-9">
			<div class="page-header" style="color:#000099">
				<h3>宠物介绍</h3>
			</div>
			<h5>${pet.description}</h5>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			// 停止轮播
			$("#myCarousel").carousel('pause');

		});
		function watchUser() {
			window.open("user/userInfo.do?userId=" + $("#sellerId").val());
		}
		function hisPets() {
			window.open("pet/hisPets.do?id=" + $("#sellerId").val());
		}
		function deletePet() {
			$.ajax({
				url : "pet/deletePet.do",
				type : "POST",
				data : {
					pet_id : $("#petId")
				},
				success : function(result) {
					if (result.msg == 'error') {
						$(".modal-body").html(result.errorMsg);
						$("#topModal").modal("show");
					} else if (result.msg == 'success') {
						$(".modal-body").html("删除成功,点击确定返回我的宠物列表");
						$("#topModal").modal("show");
						$("#topModal").on('hidden.bs.modal', function() {
							window.location.href = "pet/myPets.do";
						});
					}
				}
			});
		}
	</script>
</body>
</html>
